<script setup>
import { ref } from 'vue'
import { nanoid } from 'nanoid'
import { getPolicy } from '@/apis/policy.js'

const props = defineProps({
  selectImages:{
    type:Array,
    default:[],
  },

  uploadType:{
    type:String
  }
})

// 凭证变量
const policyObj = ref({});
const gatUploadParams = async(file)=>{
  const res =  await getPolicy();
  policyObj.value = res.data;
  policyObj.value.key = policyObj.value.dir + props.uploadType + "/" + nanoid() + file.name;
  return policyObj.value;
}

const emits = defineEmits(['upload:selectImages'])

const handleAvatarSuccess = (response,uploadFile) => {
  ElMessage({
    message: '上传成功',
    type: 'success',
  })
  props.selectImages.push({
    imgUrl:policyObj.value.host + '/' + policyObj.value.key,
    skuDefaultImg: 0,
  })
  emits('update:selectImages',props.selectImages);
}


// const beforeAvatarUpload=(rawFile) => {
//   if (rawFile.type !== 'image/jpeg') {
//     ElMessage.error('Avatar picture must be JPG format!')
//     return false
//   } else if (rawFile.size / 1024 / 1024 > 2) {
//     ElMessage.error('Avatar picture size can not exceed 2MB!')
//     return false
//   }
//   return true
// }

</script>

<template>
  <el-upload
    style="width:100%; height: 100%;display:flex;justify-content:center;align-items:center;"
    action="http://pet-supplies-oss.oss-cn-beijing.aliyuncs.com"
    :show-file-list="false"
    :data="gatUploadParams"
    :on-success="handleAvatarSuccess"
  >
    <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
</template>

<style scoped lang='scss'>
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width:70px; 
  height: 70px;
}
</style>